<template>
  <div style="margin-top: 20px"  class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true"  style="margin-left: 20px;">
      <el-form-item label="题目ID：">
        <el-input v-model="queryParam.nId" clearable></el-input>
      </el-form-item>
      <el-form-item label="内容：">
        <el-input v-model="queryParam.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 95% ; margin-left: 50px">
      <el-table-column prop="nId" label="课程ID" width="160px" />
      <el-table-column prop="content"  label="公告内容"/>
      <el-table-column prop="createTime" label="创建时间" width="160px" />
      <el-table-column  label="操作" align="center"  width="160px">
        <template slot-scope="{row}">
        <el-button size="mini"   @click="preview(row.nId)">查看公告</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
             <div v-html="currentDialogContent"></div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 25px"
                   :current-page="queryInfo.pageNo"
                   :page-sizes="[10, 20, 30, 50]"
                   :page-size="queryInfo.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
                @pagination="search"/>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import noticeApi from '@/api/notice'

export default {
  components: { Pagination },
  data () {
    return {
      form: {
        nid: null,
        content: ''
      },
      content: '',
      currentDialogContent: null,
      dialogVisible: false,
      queryInfo: {
        'noticeContent': '',
        'pageNo': 1,
        'pageSize': 10
      },
      queryParam: {
        nId: null,
        content: '',
        pageIndex: 1,
        pageSize: 10
      },
      noticeFilter: null,
      listLoading: true,
      tableData: [],
      total: 0
    }
  },
  created () {
    let id = this.$route.query.nId
    let _this = this
    this.initSubject(function () {
      _this.subjectFilter = _this.subjects
    })
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      noticeApi.select(id).then(re => {
        _this.form = re.response
        _this.formLoading = false
      })
    }
    this.initSubject()
    this.search()
  },
  methods: {
    preview (nId) {
      // eslint-disable-next-line no-undef
      const selectedRow = this.tableData.find(item => item.nId === nId)
      this.dialogVisible = true
      this.currentDialogContent = selectedRow.content
    },
    close () {
      // 这里是具体的关闭逻辑，比如隐藏弹窗、移除组件等
      this.show = false// 假设有一个控制显示/隐藏的变量
    },
    handleClose (done) {
      this.close()
      // 如果需要在关闭后执行回调函数，保持原样
      if (typeof done === 'function') {
        done()
      }
    },
    search: function () {
      this.listLoading = true
      noticeApi.getAllNotice(this.queryParam)
        .then(response => {
          // console.log('完整的后端返回数据:', response); // 输出完整的后端返回数据
          // console.log('完整的后端返回数据666:', response.response); // 输出完整的后端返回数据
          if (response) {
            const responseData = response.response
            // console.log('完整的后端返回数据1:', responseData); // 输出完整的后端返回数据
            if (Array.isArray(responseData) & responseData.length > 0) {
              console.log('后端返回的数据结构:', responseData) // 输出处理后的数据结构

              // 根据实际返回的数据结构取值
              this.tableData = responseData
              this.total = responseData.tableData.total
            } else {
              // 处理数据为空的情况
              console.warn('后端返回的数据为空')
              // 显示友好的提示消息或者不执行任何操作
            }
          } else {
            // 处理响应对象不存在的情况
            console.error('响应对象为空或数据格式不正确')
            // 显示友好的提示消息或者执行其他操作
          }
        })
        .catch(error => {
          console.error('发生错误:', error) // 输出错误信息到控制台
          // 错误处理逻辑...
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    deleteNoticess (nId) {
      let _this = this
      noticeApi.deleteNoticess(nId)
        .then(re => {
          if (re.code === 1) {
            _this.search()
            _this.$message.success(re.message)
          } else {
            _this.$message.error(re.message)
          }
        })
    },
    inputClick (object, parameterName) {
      this.richEditor.object = object
      this.richEditor.parameterName = parameterName
      this.richEditor.dialogVisible = true
    },
    submitForm () {
      this.queryParam.pageIndex = 1
      this.search()
    },
    levelChange () {
      this.queryParam.nId = null
      this.noticeFilter = this.notice.filter(data => data.level === this.queryParam.level)
    },
    subjectFormatter  (row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue)
    },
    ...mapActions('exam', { initSubject: 'initSubject' })
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      levelEnum: state => state.user.levelEnum
    }),
    ...mapGetters('notice', ['noticeEnumFormat']),
    ...mapState('notice', { notice: state => state.notice })
  }
}
</script>
